<template>
  <div class="box">
    <div class="header">
      <van-icon name="scan" color="#000000" size="22" />
      <div class="serach">
        <van-search placeholder="搜索商品、品牌" size="22" />
      </div>
      <van-icon name="chat-o" color="#575757" size="25" />
    </div>
    <div class="nav">
      <h3 @click="youClick">有货</h3>
      <ul>
        <li
          class="gray"
          v-for="(sort, index) in sorts"
          :key="index"
          @click="sortClick(index)"
          :class="{ active: activeindex == index }"
        >
          {{ sort }}
        </li>
      </ul>
      <van-icon name="arrow-down" />
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      activeindex: -1,
      sorts: ["上装", "裤装", "球鞋", "女装", "生活", "潮玩", "美装"],
    };
  },
  methods: {
    youClick() {
      this.$router.push("/home/sort");
      this.activeindex = -1;
    },
    sortClick(idx) {
      this.activeindex = idx;
      this.$router.push({
        path: "/home/perclothes",
        query: {
          index: this.activeindex,
        },
      });
    },
  },
};
</script>
<style scoped>
/* .active {
  font-size: 22px;
  color: black;
} */

.box {
  width: 345px;
  margin: auto;
}
.header,
.nav {
  width: 100%;
  margin: 12px 0;
  height: 40px;
  display: flex;
  font-size: 22px;
  align-items: center;
  justify-content: space-between;
  /* border: 1px solid red; */
}
.serach {
  width: 267px;
}
.icon {
  /* color: red; */
  font-size: 16px;
}
.van-search {
  padding: 0px;
  /* font-size: 22px; */
}
.nav h3 {
  font-size: 18px;
}
.nav ul {
  display: flex;
  flex: 1;
  height: 50px;
  height: 100%;
  align-items: center;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.gray {
  flex-shrink: 0;
  color: #9a9a9a;
  font-size: 12px;
  margin: 0 15px;
}
.active {
  font-size: 14px;
  font-weight: 900;
  color: black;
}
</style>